﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title></title>
    <link href="../src/css/rayui.css" rel="stylesheet" />
    <script src="../plugins/jquery-1.12.4.js"></script>
    <script src="../src/js/rayui.js"></script>
    <style>
        body {
            width: 90%;
            padding: 20px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <a class="btn-link" href="#anchor">使用说明</a>

    <br />
    <br />

    <!--<h4>15、我是textarea，里面的iframe是鸠占鹊巢，内部table高度尽可能填充整个页面</h4>
    <h5>因为是用textarea模仿的拖拽，效果不大明显，可以<a class="btn-link" href="tableSelDemo.html" target="_blank">打开新页面查看</a>，调整浏览器窗口大小即可查看结果</h5>
    <div style="position: relative;overflow: hidden;">
        <textarea id="textarea" style="width: 100%; min-height: 300px;"></textarea>
        <iframe id="iframe" src="tableSelDemo.html" style="width: 100%; min-height: 280px;  position: absolute; top: 0; left: 0; border: 0; padding: 0" scrolling="auto"></iframe>
    </div>-->

    <h4>14、宽度百分比</h4>
    <table id="table14"></table>

    <h4>
        13、行可以展开，此时不建议书写固定列，详情会被覆盖
        <a class="rayui-btn btn-success" id="getSelectRow13">获取选中行</a>
    </h4>
    <table id="table13"></table>

    <h4>12、合并单元格，把用户名和Subject上下行数值相同的单元格合并起来</h4>
    <table id="table12"></table>


    <h4>11、ajax请求数据，可以多选，我的高度是整个浏览器高度-300px，复选框默认样式</h4>
    <div>
        <div>
            <form id="form11">
                <input type="text" class="rayui-input" name="id" placeholder="请输入编号" />
                <input type="text" class="rayui-input" name="name" placeholder="请输入姓名" />
                <a class="rayui-btn btn-primary" id="query11">搜索</a>
                <a class="rayui-btn" id="reload11">重新加载</a>
                <a class="rayui-btn btn-success" id="getSelectRow11">获取选中行</a>
                <a class="rayui-btn btn-warning" id="resetData11">重置数据</a>
            </form>
        </div>
        <table id="table11"></table>
    </div>

    <h4>10、单行选中，默认是多选，chkSkin="bgcolor",<a class="rayui-btn btn-success" id="getSelectRow">获取选中行</a></h4>
    <table id="table10"></table>

    <h4>9、我可以排序，容器宽度700px，分页居右</h4>
    <table id="table9"></table>

    <h4>8、操作栏绑定事件，每页15条数据，内容可以换行</h4>
    <table id="table8"></table>

    <h4>7、单行表头固定列</h4>
    <table id="table7"></table>

    <h4>6、多行表头固定列</h4>
    <table id="table6"></table>

    <h4>
        5、多级表头，
        <span style="color: #f00">表头是红色的</span>，
        <span style="color: #159200">数据是绿色的</span>
        ，Subject表头居中，数据居右，此时align无效
    </h4>
    <table id="table5"></table>

    <h4>4、隐藏编号，允许换行，爱好自适应，<span style="color: #159200">数据是绿色的</span>，skin=none</h4>
    <table id="table4"></table>

    <h4>3、table所有列宽自适应，Subject可拖拽，skin=row</h4>
    <table id="table3"></table>

    <h4>2、table所有列定宽，skin=col</h4>
    <table id="table2"></table>

    <h4>1、我加载了本地数据，没有进行分页，隔行换色</h4>
    <table id="table1"></table>

    <h4>静态表格skin=none</h4>
    <table class="raytable" skin="none">
        <thead>
            <tr>
                <th>用户名</th>
                <th>爱好</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>我是name1</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-03 09:32:15</td>
            </tr>
            <tr>
                <td>我是name2</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-03 05:21:15</td>
            </tr>
            <tr>
                <td>我是name3</td>
                <td>我有很多爱好，打乒乓球，游泳，跑步，骑自行车</td>
                <td>2018-01-03 02:32:15</td>
            </tr>
            <tr>
                <td>我是name4</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-02 12:02:15</td>
            </tr>
        </tbody>
    </table>


    <h4>静态表格skin=row</h4>
    <table class="raytable" skin="row">
        <thead>
            <tr>
                <th>用户名</th>
                <th>爱好</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>我是name1</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-03 09:32:15</td>
            </tr>
            <tr>
                <td>我是name2</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-03 05:21:15</td>
            </tr>
            <tr>
                <td>我是name3</td>
                <td>我有很多爱好，打乒乓球，游泳，跑步，骑自行车</td>
                <td>2018-01-03 02:32:15</td>
            </tr>
            <tr>
                <td>我是name4</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-02 12:02:15</td>
            </tr>
        </tbody>
    </table>


    <h4>静态表格skin=col</h4>
    <table class="raytable" skin="col" ray-even>
        <thead>
            <tr>
                <th>用户名</th>
                <th>爱好</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>我是name1</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-03 09:32:15</td>
            </tr>
            <tr>
                <td>我是name2</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-03 05:21:15</td>
            </tr>
            <tr>
                <td>我是name3</td>
                <td>我有很多爱好，打乒乓球，游泳，跑步，骑自行车</td>
                <td>2018-01-03 02:32:15</td>
            </tr>
            <tr>
                <td>我是name4</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-02 12:02:15</td>
            </tr>
        </tbody>
    </table>

    <h4>静态表格</h4>
    <table class="raytable">
        <thead>
            <tr>
                <th>用户名</th>
                <th>爱好</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>我是name1</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-03 09:32:15</td>
            </tr>
            <tr>
                <td>我是name2</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-03 05:21:15</td>
            </tr>
            <tr>
                <td>我是name3</td>
                <td>我有很多爱好，打乒乓球，游泳，跑步，骑自行车</td>
                <td>2018-01-03 02:32:15</td>
            </tr>
            <tr>
                <td>我是name4</td>
                <td>我有很多爱好，打羽毛球，打篮球，打乒乓球</td>
                <td>2018-01-02 12:02:15</td>
            </tr>
        </tbody>
    </table>

    <script>

        rayui.use(['table', 'swich', 'layer'], function () {

            $.fn.serializeJson = function () {
                var serializeObj = {};
                var array = this.serializeArray();
                $(array).each(function () {
                    if (serializeObj[this.name]) {
                        if ($.isArray(serializeObj[this.name])) {
                            serializeObj[this.name].push(this.value);
                        } else {
                            serializeObj[this.name] = [serializeObj[this.name], this.value];
                        }
                    } else {
                        serializeObj[this.name] = this.value;
                    }
                });
                return serializeObj;
            };

            var data = [];
            var now = new Date(2017, 10, 1);
            var mm = now.getMinutes();

            function getNowFormatDate(date) {
                var seperator1 = "-";
                var seperator2 = ":";
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = year +
                    seperator1 +
                    month +
                    seperator1 +
                    strDate +
                    " " +
                    date.getHours() +
                    seperator2 +
                    date.getMinutes() +
                    seperator2 +
                    date.getSeconds();
                return currentdate;
            }

            for (var i = 1; i < 102; i++) {
                now.setMinutes(mm + i);
                var model = {
                    Id: i,
                    Subject: "我是Subject" + i,
                    Body: "我是body" + i,
                    Sex: "男",
                    Name: "我是name" + i,
                    Hobby: "我有很多爱好，打羽毛球，打篮球，打乒乓球，游泳，跑步，骑自行车，总之我要把这个表格撑大，撑大到换行",
                    CreateTime: getNowFormatDate(now)
                }
                data.push(model);
            }

            var table = rayui.table,
                swich = rayui.swich,
                layer = rayui.layer;

            function initTable14() {
                var tableIns = table.render({
                    elem: "#table14",
                    data: data,
                    height: 400,
                    page: true,
                    cols: [
                        [
                            { field: 'Id', title: '编号', width: '10%' },
                            { field: 'Name', title: '用户名', width: '*', align: 'left', sort: true, resize: true, dataType: 'html' },
                            { field: 'Subject', title: 'Subject', width: '20%', align: 'center', resize: true },
                            { field: 'Hobby', title: '爱好', width: '20%', align: 'center', resize: true },
                            { field: 'Body', title: 'Body', width: '20%' },
                            {
                                field: 'opts0',
                                title: '禁启用',
                                width: '10%',
                                align: 'center',
                                resize: true,
                                formatter: function (v, data, index) {
                                    if (index % 3 === 0)
                                        return '<input class="rayui-swich" type="button" ray-size="2x-sh" value="on" ray-event="IsUsed-14"/>';
                                    return '<input class="rayui-swich" type="button" ray-size="2x-sh" ray-event="IsUsed-14"/>';
                                }
                            },
                        ]
                    ],
                    onBeforeRenderStyle: function () {
                        swich.render($("#table14").next());
                    }
                });
                tableIns.on("swich", function (evt, obj) {
                    var str = "我是第14个例子，事件：" + evt + ",编号：" + obj.data.Id + ",按钮状态：" + obj.value,
                        isPrevent = obj.index % 4 === 0;
                    if (isPrevent) {
                        str += "<br/><div class='font-color-red'>（模拟场景）操作不符合条件，点击确定阻止操作<div>";
                    }
                    layer.alert(str, {
                        shadeClose: true,
                        btn0: function (index) {
                            layer.close(index);
                            if (isPrevent) {
                                swich.toggle(obj.elem);
                            }
                        }
                    });
                });
            }

            function initTable13() {
                var tmpdata = $.extend(true, [], data);
                tmpdata[0].Name = "<script>alert('不该弹窗的');<\/script>";
                var tableIns = table.render({
                    elem: "#table13",
                    data: tmpdata,
                    height: 500,
                    page: true,
                    chkSkin: 'box',
                    expandRow: true,
                    cols: [
                        [
                            { title: '标题1', align: 'center', colspan: 3 },
                            { title: '标题2', align: 'center', colspan: 5 }
                        ],
                        [
                            {
                                field: 'chk', width: 110, align: 'left', formatter: function (v, data) {
                                    return v === null ? "全选" : "编号" + data.Id;
                                }
                            },
                            { field: 'Id', title: '编号', width: 50, hidden: true },
                            { field: 'Name', title: '用户名', width: 120, align: 'left', sort: true, resize: true, dataType: 'html' },
                            { field: 'Subject', title: 'Subject', width: 120, align: 'center', resize: true },
                            { field: 'Hobby', title: '爱好', minWidth: 100, align: 'center', resize: true },
                            { field: 'Body', title: 'Body', width: 150 },
                            {
                                field: 'opts0',
                                title: '禁启用',
                                width: 80,
                                align: 'center',
                                resize: true,
                                formatter: function (v, data, index) {
                                    if (index % 3 === 0)
                                        return '<input class="rayui-swich" type="button" ray-size="2x-sh" value="on" ray-event="IsUsed-13"/>';
                                    return '<input class="rayui-swich" type="button" ray-size="2x-sh" ray-event="IsUsed-13"/>';
                                }
                            },
                            {
                                field: 'opts',
                                title: '操作',
                                width: 150,
                                align: 'center',
                                resize: true,
                                formatter: function () {
                                    return '<a class="rayui-btn btn-4x-sh btn-danger" ray-event="del">删除</a>&nbsp;<a class="rayui-btn btn-4x-sh btn-success" ray-event="edit">编辑</a>';
                                }
                            }
                        ]
                    ],
                    onBeforeRenderStyle: function () {
                        swich.render($("#table13").next());
                    }
                });
                tableIns.on("click", function (evt, obj) {
                    if (evt === "del") {
                        if (window.confirm("确定删除[" + obj.data.Name + "]吗？")) {
                            obj.del();
                        }
                    } else if (evt === "edit") {
                        var name = window.prompt("请输入姓名", obj.data.Name);
                        if (name != null) {
                            obj.data.Name = name;
                            obj.update();
                        }
                    } else {
                        layer.msg("事件：" + evt, { time: 2000, shade: false });
                    }
                });
                tableIns.on("swich", function (evt, obj) {
                    var str = "我是第13个例子，事件：" + evt + ",编号：" + obj.data.Id + ",按钮状态：" + obj.value,
                        isPrevent = obj.index % 4 === 0;
                    if (isPrevent) {
                        str += "<br/><div class='font-color-red'>（模拟场景）操作不符合条件，点击确定阻止操作<div>";
                    }
                    layer.alert(str, {
                        shadeClose: true,
                        btn0: function (index) {
                            layer.close(index);
                            if (isPrevent) {
                                swich.toggle(obj.elem);
                            }
                        }
                    });
                });
                tableIns.on("expand", function (index, rowdata, $container) {
                    if (index % 2 === 0) {
                        return [
                            '<div>我是详情页面</div>',
                            '<div>用户名:' + rowdata.Name.replace(/[<>&"]/g, function (c) { return { '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' }[c]; }) + '</div>',
                            '<div>编号:' + rowdata.Id + '</div>',
                            '<div>Subject:' + rowdata.Subject + '</div>',
                            '<div>爱好:' + rowdata.Hobby + '</div>'
                        ].join('');
                    } else {
                        var id = "tableDetail" + index;
                        $container.append('<table id="' + id + '"></table>');
                        table.render({
                            elem: "#" + id,
                            data: data.slice(0, 2),
                            width: $container.width(),
                            cols: [
                                [
                                    { field: 'Id', title: '编号', width: 50 },
                                    { field: 'Name', title: '用户名', width: 120, align: 'left' },
                                    {
                                        field: 'Subject',
                                        title: 'Subject',
                                        width: 120,
                                        align: 'center',
                                        resize: true
                                    },
                                    { field: 'Hobby', title: '爱好', minWidth: 100, align: 'center', resize: true },
                                    { field: 'Body', title: 'Body', width: 150 }
                                ]
                            ]
                        });
                    }
                });

                $("#getSelectRow13").click(function () {
                    var list = tableIns.getSelectedRows();
                    alert(JSON.stringify(list));
                });

            }

            function initTable12() {
                var dataTmp = [];
                for (var i = 1; i < 102; i++) {
                    now.setMinutes(mm + i);
                    var model = {
                        Id: i,
                        Name: "我是name" + Math.round(i / 2),
                        Subject: "我是Subject" + Math.round(i / 2),
                        Body: "我是body" + i,
                        Sex: "男",
                        Hobby: "我有很多爱好，打羽毛球，打篮球，打乒乓球，游泳，跑步，骑自行车，总之我要把这个表格撑大，撑大到换行",
                        CreateTime: getNowFormatDate(now)
                    }
                    dataTmp.push(model);
                }

                var tableIns = table.render({
                    elem: "#table12",
                    data: dataTmp,
                    height: 300,
                    colspanDefs: ["Name", "Subject"],
                    cols: [
                        [
                            { field: 'Id', title: '编号', width: 120, fixed: 'left' },
                            { field: 'Name', title: '用户名', width: 150, align: 'left', sort: true, fixed: 'left' },
                            { field: 'Subject', title: 'Subject', width: 150, align: 'center', resize: true },
                            { field: 'Hobby', title: '爱好', width: 150, align: 'center', resize: true },
                            { field: 'Body', title: 'Body', width: 150 },
                            {
                                field: 'opts',
                                title: '操作',
                                width: 150,
                                fixed: 'right',
                                align: 'center',
                                resize: true,
                                formatter: function () {
                                    return '<a class="rayui-btn btn-4x-sh btn-danger" ray-event="del">删除</a>&nbsp;<a class="rayui-btn btn-4x-sh btn-success" ray-event="edit">编辑</a>';
                                }
                            }
                        ]
                    ]
                });

                tableIns.on("click", function (evt, obj) {
                    if (evt === "del") {
                        if (window.confirm("确定删除吗？")) {
                            obj.del();
                        }
                    } else if (evt === "edit") {
                        var name = window.prompt("请输入姓名", obj.data.Name);
                        if (name != null) {
                            obj.data.Name = name;
                            obj.update();
                        }
                    }
                });
            }

            function initTable11() {
                var tableIns = table.render({
                    elem: "#table11",
                    url: "/Data.ashx?action=GetList",
                    method: "post",
                    height: 'full-300',
                    //singleSelect: true,
                    serialField: "Id",
                    page: true,
                    even: true,
                    initSort: {
                        sortField: 'Id',
                        sortType: 'asc'
                    },
                    cols: [
                        [
                            { field: 'chk', width: 60, align: 'center', fixed: 'left' },
                            { field: 'Id', title: '编号', width: 60, fixed: 'left', sort: true, resize: true },
                            { field: 'Name', title: '用户名', width: 150, align: 'center', fixed: 'left' },
                            {
                                field: 'Subject',
                                title: 'Subject',
                                minWidth: 100,
                                align: 'center',
                                sort: true,
                                resize: true
                            },
                            {
                                field: 'Sex',
                                title: '性别',
                                width: 100,
                                align: 'center',
                                resize: true,
                                formatter: function (data) {
                                    return data.Sex ? "男" : "女";
                                }
                            },
                            { field: 'Hobby', title: '爱好', width: 250, align: 'center', resize: true },
                            { field: 'Body', title: 'Body', width: 150, resize: true },
                            { field: 'CreateTime', title: '时间', width: 165, sort: true },
                            {
                                field: 'opts',
                                title: '操作',
                                width: 150,
                                fixed: 'right',
                                align: 'center',
                                resize: true,
                                formatter: function () {
                                    return '<a class="rayui-btn btn-4x-sh btn-danger" ray-event="del">删除</a>&nbsp;<a class="rayui-btn btn-4x-sh btn-success" ray-event="edit">编辑</a>';
                                }
                            }
                        ]
                    ],
                    onPageLimitChanged: function (preLimit, currLimit) {
                        alert("每页条数从每页 " + preLimit + " 条 改变为 每页 " + currLimit + " 条");
                    },
                    onPageJump: function (prePage, currPage) {
                        alert("从第 " + prePage + " 页 跳转到 第 " + currPage + " 页");
                    }
                });

                tableIns.on("click", function (evt, obj) {
                    if (evt === "del") {
                        if (window.confirm("确定删除吗？")) {
                            $.getJSON("data.ashx?action=DeleteData",
                                { id: obj.data.Id },
                                function (data) {
                                    if (data.ret === 0)
                                        obj.del();
                                    else
                                        alert("删除失败");
                                });
                        }
                    } else if (evt === "edit") {
                        var name = window.prompt("请输入姓名", obj.data.Name);
                        if (name != null) {
                            obj.data.Name = name;
                            obj.update();
                        }
                    }
                });

                $("#query11").click(function () {
                    tableIns.reload({
                        where: $("#form11").serializeJson()
                    });
                });

                $("#reload11").click(function () {
                    tableIns.reload({ page: { curr: 1 } });
                });

                $("#getSelectRow11").click(function () {
                    var list = tableIns.getSelectedRows();
                    alert(JSON.stringify(list));
                });

                $("#resetData11").click(function () {
                    $.getJSON("data.ashx?action=ResetData",
                        function (data) {
                            if (data.ret === 0)
                                alert("操作成功");
                            else
                                alert("操作失败");

                        });
                });

            }

            function initTable10() {
                var tableIns = table.render({
                    elem: "#table10",
                    data: data,
                    singleSelect: true,
                    height: 300,
                    chkSkin: "bgcolor",
                    page: true,
                    initSort: {
                        sortField: 'Id',
                        sortType: 'asc'
                    },
                    cols: [
                        [
                            { field: 'chk', width: 60, align: 'center', fixed: 'left' },
                            { field: 'Id', title: '编号', width: 60, fixed: 'left', sort: true },
                            { field: 'Name', title: '用户名', width: 100, align: 'center', fixed: 'left' },
                            {
                                field: 'Subject',
                                title: 'Subject',
                                minWidth: 100,
                                align: 'center',
                                sort: true,
                                resize: true
                            },
                            { field: 'Sex', title: '性别', width: 100, align: 'center', resize: true },
                            { field: 'Hobby', title: '爱好', width: 250, align: 'center', resize: true },
                            { field: 'Body', title: 'Body', width: 150, resize: true },
                            { field: 'CreateTime', title: '时间', width: 165, sort: true },
                            {
                                field: 'opts',
                                title: '操作',
                                width: 150,
                                fixed: 'right',
                                align: 'center',
                                resize: true,
                                formatter: function () {
                                    return '<a class="rayui-btn btn-4x-sh btn-danger" ray-event="del">删除</a>&nbsp;<a class="rayui-btn btn-4x-sh btn-success" ray-event="edit">编辑</a>';
                                }
                            }
                        ]
                    ]
                });

                tableIns.on("click", function (evt, obj) {
                    if (evt === "del") {
                        if (window.confirm("确定删除吗？"))
                            obj.del();
                    } else if (evt === "edit") {
                        alert('您选中了第' + index + '行');
                    }
                });

                tableIns.on("check", function (obj) {
                    //alert("点击了第" + obj.index + "行，状态：" + obj.checked);
                });

                $("#getSelectRow").click(function () {
                    var list = tableIns.getSelectedRows();
                    alert(JSON.stringify(list));
                });
            }

            function initTable9() {
                var tableIns = table.render({
                    elem: "#table9",
                    data: data,
                    height: 300,
                    width: 700,
                    initSort: {
                        sortField: 'Id',
                        sortType: 'desc'
                    },
                    page: {
                        align: 'right',
                        limit: 20,
                        local: true
                    },
                    cols: [
                        [
                            { field: 'Id', title: '编号', width: 60, fixed: 'left', sort: true },
                            { field: 'Name', title: '用户名', width: 120, align: 'center', fixed: 'left' },
                            {
                                field: 'Subject',
                                title: 'Subject',
                                minWidth: 100,
                                align: 'center',
                                sort: true,
                                resize: true
                            },
                            { field: 'Sex', title: '性别', width: 80, align: 'center', resize: true },
                            { field: 'Hobby', title: '爱好', width: 240, align: 'center', resize: true },
                            { field: 'Body', title: 'Body', width: 120, resize: true },
                            { field: 'CreateTime', title: '时间', width: 165, sort: true },
                            {
                                field: 'opts',
                                title: '操作',
                                width: 125,
                                fixed: 'right',
                                align: 'center',
                                resize: true,
                                formatter: function () {
                                    return '<a class="rayui-btn btn-4x-sh btn-danger" ray-event="del">删除</a>&nbsp;<a class="rayui-btn btn-4x-sh btn-success" ray-event="edit">编辑</a>';
                                }
                            }
                        ]
                    ]
                });

                tableIns.on("click", function (evt, obj) {
                    if (evt === "del") {
                        if (window.confirm("确定删除吗？"))
                            obj.del();
                    } else if (evt === "edit") {
                        alert('您选中了第' + index + '行');
                    }
                });
            }

            function initTable8() {
                var tableIns = table.render({
                    elem: "#table8",
                    data: data,
                    nowrap: false,
                    height: 400,
                    page: {
                        local: true,
                        limit: 15
                    },
                    cols: [
                        [
                            { field: 'Id', title: '编号', width: 60, fixed: 'left' },
                            { field: 'Name', title: '用户名', width: 120, align: 'center', fixed: 'left' },
                            { field: 'Subject', title: 'Subject', width: 150, align: 'center', resize: true },
                            { field: 'Sex', title: '性别', width: 60, align: 'center' },
                            { field: 'Hobby', title: '爱好', minWidth: 240, align: 'center', resize: true },
                            { field: 'Body', title: 'Body', width: 120, resize: true },
                            {
                                field: 'opts',
                                title: '操作',
                                width: 130,
                                fixed: 'right',
                                align: 'center',
                                formatter: function () {
                                    return '<a class="rayui-btn btn-4x-sh btn-danger" ray-event="del">删除</a>&nbsp;<a class="rayui-btn btn-4x-sh btn-success" ray-event="edit">编辑</a>';
                                }
                            }
                        ]
                    ]
                });
                tableIns.on("click", function (evt, obj) {
                    if (evt === "del") {
                        obj.del();
                    } else if (evt === "edit") {
                        alert('您选中了第' + index + '行');
                    }
                });
            }

            function initTable7() {
                var tableIns = table.render({
                    elem: "#table7",
                    data: data,
                    height: 300,
                    even: true,
                    page: {
                        local: true
                    },
                    cols: [
                        [
                            { field: 'Id', title: '编号', width: 60, fixed: 'left' },
                            {
                                field: 'Name', title: '用户名', width: 150, align: 'center', fixed: 'left', resize: true, islink: true, formatter: function (v) {
                                    return "<a target='_blank' href='http://www.baidu.com'>" + v + "，我是链接可以点击</a>";
                                }
                            },
                            { field: 'Hobby', title: '爱好', width: 150, align: 'center', resize: true },
                            { field: 'Subject', title: 'Subject', width: 150, align: 'center' },
                            { field: 'Sex', title: '性别', width: 150, align: 'center' },
                            { field: 'Body', title: 'Body', width: 120, fixed: 'right' }
                        ]
                    ]
                });
            }

            function initTable6() {
                var tableIns = table.render({
                    elem: "#table6",
                    data: data,
                    height: 400,
                    even: true,
                    page: {
                        local: true
                    },
                    cols: [
                        [
                            { title: '我是主标题在最上面', align: 'center', colspan: 6 }
                        ],
                        [
                            { title: '左侧固定', colspan: 2, fixed: 'left' },
                            { title: '我是副标题', align: 'center', colspan: 2 },
                            { title: '右侧固定', align: 'center', colspan: 2 }
                        ],
                        [
                            { field: 'Id', title: '编号', width: 60, fixed: 'left' },
                            { field: 'Name', title: '用户名', width: 150, align: 'center', fixed: 'left', resize: true },
                            { field: 'Subject', title: 'Subject', minWidth: 100, align: 'center', resize: true },
                            { field: 'Sex', title: '性别', width: 50, align: 'center' },
                            { field: 'Hobby', title: '爱好', minWidth: 150, align: 'center' },
                            { field: 'Body', title: 'Body', width: 150, fixed: 'right', resize: true }
                        ]
                    ]
                });
            }

            function initTable5() {
                var tableIns = table.render({
                    elem: "#table5",
                    data: data,
                    height: 400,
                    page: {
                        local: true
                    },
                    cols: [
                        [
                            { title: '我是主标题在最上面', align: 'center', width: 120, colspan: 5 }
                        ],
                        [
                            { field: 'Id', title: '编号', width: 60, rowspan: 2 },
                            {
                                title: '我是副标题在下面，我字号小一点，同时我是红色的',
                                align: 'center',
                                width: 120,
                                colspan: 4,
                                style: { "font-size": "14px", color: "#f00" }
                            }
                        ],
                        [
                            { field: 'Name', title: '用户名', width: 120, align: 'left', dataStyle: { color: "#159200" } },
                            {
                                field: 'Subject',
                                title: 'Subject',
                                align: 'left',
                                style: { "text-align": "center" },
                                dataStyle: { "text-align": "right" } //此时align无效
                            },
                            { field: 'Hobby', title: '爱好', align: 'center', resize: true },
                            { field: 'Body', title: 'Body', width: 120 }
                        ]
                    ]
                });
            }

            function initTable4() {
                var tableIns = table.render({
                    elem: "#table4",
                    data: data,
                    nowrap: false,
                    height: 300,
                    skin: "none",
                    cols: [
                        [
                            { field: 'Id', title: '编号', width: 50, hidden: true },
                            { field: 'Name', title: '用户名', width: 150 },
                            { field: 'Subject', title: 'Subject', width: 150, align: 'center' },
                            {
                                field: 'Hobby',
                                title: '爱好',
                                minWidth: 100,
                                align: 'center',
                                resize: true,
                                dataStyle: { color: '#159200' }
                            },
                            { field: 'Body', title: 'Body', width: 150, fixed: 'right' }
                        ]
                    ]
                });
            }

            function initTable3() {
                var tableIns = table.render({
                    elem: "#table3",
                    data: data,
                    height: 300,
                    page: true,
                    skin: "row",
                    cols: [
                        [
                            { field: 'Id', title: '编号', rowspan: 2 },
                            { field: 'Name', title: '用户名', align: 'left' },
                            { field: 'Subject', title: 'Subject', align: 'center', resize: true },
                            { field: 'Body', title: 'Body' }
                        ]
                    ]
                });
            }

            function initTable2() {
                var tableIns = table.render({
                    elem: "#table2",
                    data: data,
                    height: 300,
                    page: true,
                    skin: "col",
                    cols: [
                        [
                            { field: 'Id', title: '编号', width: 120, rowspan: 2 },
                            { field: 'Name', title: '用户名', width: 100, align: 'left' },
                            { field: 'Subject', title: 'Subject', width: 150, align: 'center', resize: true },
                            { field: 'Body', title: 'Body', width: 150 }
                        ]
                    ]
                });
            }

            function initTable1() {
                var dataTmp = [], index = 0;
                while (index < 25) {
                    dataTmp.push(data[index++]);
                }
                var tableIns = table.render({
                    elem: "#table1",
                    data: dataTmp,
                    height: 300,
                    even: true,
                    cols: [
                        [
                            { field: 'Id', title: '编号', width: 120 },
                            { field: 'Name', title: '用户名', width: 100, align: 'left' },
                            { field: 'Subject', title: 'Subject', width: 150, align: 'center', resize: true },
                            { field: 'Hobby', title: '爱好', minWidth: 150, align: 'center', resize: true },
                            { field: 'Body', title: 'Body', width: 150 }
                        ]
                    ]
                });
            }

            initTable1();
            initTable2();
            initTable3();
            initTable4();
            initTable5();
            initTable6();
            initTable7();
            initTable8();
            initTable9();
            initTable10();
            initTable11();
            initTable12();
            initTable13();
            initTable14();

            $(function () {
                $("#textarea").on("mouseenter mousemove mouseleave",
                    function () {
                        $("#iframe").height($(this).height() - 20).width($(this).width());
                    });
            });
        });

    </script>

    <div class="card">
        <p>1、使用排序时，上传参数会追加 { sortField:"name" sortType:"desc" }，sortField为字段名，sortType为desc或asc</p>
        <p>2、使用分页时，上传参数会追加 { page:1 limit:10 }，page为页码，limit为每页条数</p>
        <p>3、在on事件中操作data数据会修改table的原有数据</p>
    </div>

    <h4 id="anchor">使用说明</h4>
    <pre style="color: #159200; word-wrap: break-word; white-space: pre-wrap;">

使用说明：
表格支持定宽或自适应宽度，
使用方法 var tableIns = table.render(option);

table属性option：
url：ajax请求路径
method：ajax请求方法，可选get|post，默认get
where: ajax查询条件，object对象
width：容器宽度，数值
height：容器高度，数值|full-数值|sel-jqselectors-数值(jqselectors选择器不支持-符号，因为需要按照-分割)。
             使用sel模式时，只需填写table下方的容器选择器，系统会自动剔除上方的dom高度，如果固定数值没有，请填写0，不能省略
minHeight： 表格最小高度，默认80
cols：显示列，数组[[]]
skin：皮肤，可选col|row|none，col：列边框风格，row：行边框风格，none：无边框风格
even：隔行换色，可选true|false，默认false
chkSkin：checkbox的皮肤，支持checkbox内所有皮肤，现在可选：不填|outer|bgcolor|box
expandRow: 行是否允许展开，可选true|false，默认false。需要配合on("expand", function(){})使用
singleSelect：单选行，可选true|false，默认false，可以选中多行
initOnly: 只进行初始化，不请求数据，默认false
nowrap：数据是否自动换行，默认true，不自动换行，填写true性能更高一下
localSort： 本地排序，默认true，不想使用本地排序，请配置成false；如果由后台排序建议配置成false
loading： 请求数据时，是否显示loading，默认true
cellMinWidth： 所有单元格默认最小宽度，默认60px
fieldSerial: 主键唯一字段，建议填写，否则删除数据的时候性能减弱，默认"id"，区分大小写
fieldChecked: 数据选中字段，默认"checked"
colspanDefs：数组，合并单元格，例如：["Name", "Body"]将会按照Name和Body进行单元格合并
page：是否分页，默认false，可选true，或则如下
    {
        align：对齐方式，可选left|right|center，默认left
        curr：当前页
        limit：每页显示的数量，默认10条
        limits：每页条数选择，默认[10, 20, 30, 40, 50, 60, 70, 80, 90]
    }

属性事件：
onAjaxBeforeSend(xhr)：和ajax beforeSend参数一致，此时this为本次ajax请求时传递的options参数。
                                        如果返回false可以取消本次ajax请求
onAjaxSuccess(result)：ajax成功请求数据时（table清除上次数据后），在这里可以做数据统一。
                                    需要返回json数据，格式为{code: 0, msg: '错误信息', count: 100, data: []},code为0时表示成功。
                                    此时this为本次ajax请求时传递的options参数
onAjaxError(xhr, textStatus, errorThrown)：和ajax error参数一致，此时this为本次ajax请求时传递的options参数

onBeforeAddRow(rowindex, data)： 添加行数据前返回行索引和行数据
onAddRow(rowindex, data, tr)： 添加行数据后返回行索引、行数据和当前行jq对象
onBeforeRenderStyle()：渲染数据前，如果table内使用了其他组件，可以再这里调用一下数据渲染。在onComplete调用会导致样式差异
onPageLimitChanged(preLimit, toLimit)：当每页条数发生变化时触发，preLimit为之前的页条数，toLimit为修改后条数
onPageJump(prePage, toPage)：页码跳转，进行数据请求绑定前，prePage为之前的页码，toPage为修改后的页码
onComplete()：所有处理完毕（table渲染数据结束）



cols：属性
islink：此时取消点击单元格事件，可以使用a标签进行跳转
filed：绑定字段，需要显示的列必填，主标题副标题可不填，填写时需唯一
title：标题
sort：排序，可选true|false，默认false
width：宽度，可以是定宽，百分比；不填则自适应宽度
rowspan：行合并
colspan：列合并
resize：拖拽宽度，默认false
align：对齐方式
style：设置head样式，支持css所有样式，带小横线的需要用引号包起来，eg：style: { "font-size": "14px" }
dataStyle: 设定数据样式，只有包含field时才有效，带小横线的需要用引号包起来，eg：style: { "font-size": "14px" }
dataType: 数据格式，可选html|非html值。当为html时，会进行转码，其他值不做处理，有formatter时无效，自行处理
formatter(v, data, index)：数据格式化，传入一个函数比如操作列，v当前值，data当前行数据，index行号从0开始，
                                        当filed为chk时，v和data均为null，此时返回的是字符串会当做rayui-checkbox的ray-title使用；
                                        当filed为其他字段时，返回数据会当做td的内容


tableIns方法：
reload：重新加载
getSelectedRows：获取选中行，返回数组，数据格式每个包含一个index，data，index为选中行序号，
                             从0开始，data为当前行数据，单选时注意使用list[0]
getData：获取table所有数据
on(event, callback)：事件绑定。event字符串，可选如下，callback为函数
    click返回函数function(evt, obj)，evt为事件(即ray-event)，obj包含index，data，tr，del，update，index为tr行号，
                                                     tr为dom对象，data为数据（只监听包含ray-event的click事件）
    swich返回函数function(evt, obj)，evt为事件(即ray-event)，obj包含index，data，tr，del，update，index为tr行号，
                                                     tr为dom对象，data为数据（只监听包含ray-event的swich事件）
    sort返回函数(initSort)，initSort对象包含：sortField排序字段，sortType排序方式，可选asc|desc
    expand返回函数(rowindex, data, container): 行展开时回调，rowindex：行数据前返回行索引，data行数据，
                                                                container为容器，需要返回一个字符串
    check返回函数(obj)：行选中，obj = {
                    type: "one",//all|one
                    index: -1,//行index，-1是全选无效
                    checked: true,//true|false
					data: 数据//如果是单选则是单行数据，如果是多选则是全部数据
                };



可全局配置参数：
$.rayTableOptions：属性包含如下
        expandRow: false,
        nowrap: true,
        minHeight: 80,
        singleSelect: false,
        localSort: true,
        loading: true,
        cellMinWidth: 60,
        fieldSerial: "id"
    

注意：
1、进行拖拽后，表格将不再自适应宽度
2、cols中同时设置style和dataStyle时align无效。并且不建议设置max-width，首先对td无效，再者禁止换行时数据和表头有1px之差
3、建议所有列书写一个minWidth，因为当数据允许换行时(nowrap=true时)，表头可能会被换行，不好看
4、

</pre>

</body>
</html>